<template>
  <div class="nav">
    <ul>
      <li @click="to('/Work/Recommend')">
          <div class="icon-uniE118"></div>
          <span>作品</span>
      </li>
      <li @click="to('/Picture')">
          <div class="icon-uniE060"></div>
          <span>图片</span>
      </li>
      <li @click="to('/Skill/ideas')">
          <div class="icon-uniE046"></div>
          <span>技巧</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
    methods: {
       to(url){
           this.$router.push(url);
       }
    },
};
</script>
<style scoped>
.nav {
  background: #fff;
  height: 1.9rem;
  padding: 0 0.6rem;
}
.nav ul {
  display: flex;
  width: 100%;
  justify-content: center;
}
.nav ul li {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  padding-top: 0.3rem;
  margin: 0 0.15rem;
}
.nav ul li div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0.86rem;
  width: 0.86rem;
  border-radius: 0.43rem;
  margin: 0 2px;
  font-size: 0.46rem;
  text-align: center;
  color: #fff;
  background: skyblue;
}
.nav ul li span {
  display: inline-block;
}
</style>
